<template>
  <el-row justify="center">
    <el-col :span="6">
      <el-statistic title="总销售数量" :value="outputSalesNum" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="总销售金额" :value="outputSalesPrice" />
    </el-col>
  </el-row>
  <div>
    <div ref="SixMonthSalesNumChart" style="width: 100%; height: 400px;"></div>
    <div ref="SixMonthSalesPriceChart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { useTransition } from '@vueuse/core'
import { getSixMonthSalesNum, getSixMonthSalesPrice, getTotalSalesNum, getTotalSalesPrice } from '@/api/order'

const totalPrice = ref(0)
const totalNum = ref(0)
const SixMonthSalesNumChart = ref<HTMLDivElement | null>(null)
const SixMonthSalesPriceChart = ref<HTMLDivElement | null>(null)

//获取过去六个月的月份
const getLastSixMonths = () => {
  const lastSixMonths = [];
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear();
  const currentMonth = currentDate.getMonth();
  for(let i = 0; i < 6; i++) {
    let monthIndex = (currentMonth - i + 12) % 12;
    let year = currentYear;
    if(monthIndex > currentMonth) {
      year -= 1;
    }
    const formattedMonth = `${year}-${(monthIndex + 1).toString().padStart(2, '0')}`;
    lastSixMonths.push(formattedMonth);
  }
  return lastSixMonths.reverse()
}

const allMonths  = getLastSixMonths();

//存储总的销售金额+数量
const outputSalesPrice = useTransition(totalPrice, {
  duration: 1500,
})
const outputSalesNum = useTransition(totalNum, {
  duration: 1500,
})

let SixMonthSalesNumChartData = {
  month: allMonths,
  salesNum: [0,0,0,0,0,0],
}
let SixMonthSalesPriceChartData = {
  month: allMonths,
  salesPrice: [0,0,0,0,0,0],
}

//获取总/过去六个月的销售金额+数量
const getTotalPriceAndNum = async() => {
  const resultTotalSalesPrice = await getTotalSalesPrice();
  const resultTotalSalesNum = await getTotalSalesNum();
  totalPrice.value = resultTotalSalesPrice.data;
  totalNum.value = resultTotalSalesNum.data;
  const resultSixMonthSalesPrice = await getSixMonthSalesPrice();
  const resultSixMonthSalesNum = await getSixMonthSalesNum();
  allMonths.forEach((month, index) => {
    const monthSalesNumData = resultSixMonthSalesNum.data.find((item: { month: string }) => item.month === month);
    const monthSalesPriceData = resultSixMonthSalesPrice.data.find((item: { month: string }) => item.month === month);
    if (monthSalesNumData) {
      SixMonthSalesNumChartData.salesNum[index] = monthSalesNumData.totalSalesNum;
      SixMonthSalesPriceChartData.salesPrice[index] = monthSalesPriceData.totalSalesPrice;
    } else {
      SixMonthSalesNumChartData.salesNum[index] = 0;
      SixMonthSalesPriceChartData.salesPrice[index] = 0;
    }
  });
  updateChart();
}

const updateChart = () => {
  const salesNumChart = echarts.init(SixMonthSalesNumChart.value as HTMLDivElement);
  const salesPriceChart = echarts.init(SixMonthSalesPriceChart.value as HTMLDivElement);
  const salesNumOption = {
    title: {
      text: '过去6个月销售数量',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['销售数量'],
    },
    xAxis: {
      type: 'category',
      data: SixMonthSalesNumChartData.month,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '销售数量',
        type: 'line',
        data: SixMonthSalesNumChartData.salesNum,
        smooth: true,
        lineStyle: {
          color: '#47a3f3',
          width: 2,
        },
      },
    ],
  };
  salesNumChart.setOption(salesNumOption);
  const salesPriceOption = {
    title: {
      text: '过去6个月销售金额',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['销售金额'],
    },
    xAxis: {
      type: 'category',
      data: SixMonthSalesPriceChartData.month,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '销售金额',
        type: 'line',
        data: SixMonthSalesPriceChartData.salesPrice,
        smooth: true,
        lineStyle: {
          color: '#47a3f3',
          width: 2,
        },
      },
    ],
  };
  salesPriceChart.setOption(salesPriceOption);
}

onMounted(() => {
  // 页面加载时获取数据
  getTotalPriceAndNum();

  // 窗口尺寸变化时自动调整图表大小
  window.addEventListener('resize', () => {
    const salesNumChart = echarts.getInstanceByDom(SixMonthSalesNumChart.value as HTMLDivElement);
    salesNumChart.resize();
    const salesPriceChart = echarts.getInstanceByDom(SixMonthSalesPriceChart.value as HTMLDivElement);
    salesPriceChart.resize();
  })
})
</script>

<style scoped>
.el-col {
  text-align: center;
}
</style>